<div id="flex_direction_column_no_height" style="width: 100px">
  <div style="height: 10px;"></div>
  <div style="height: 10px;"></div>
  <div style="height: 10px;"></div>
</div>

<div id="flex_direction_row_no_width" style="height: 100px; flex-direction: row;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column" style="height: 100px; width: 100px;">
  <div style="height: 10px;"></div>
  <div style="height: 10px;"></div>
  <div style="height: 10px;"></div>
</div>

<div id="flex_direction_row" style="height: 100px; width: 100px; flex-direction: row;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse" style="height: 100px; width: 100px; flex-direction: column-reverse;">
  <div style="height: 10px;"></div>
  <div style="height: 10px;"></div>
  <div style="height: 10px;"></div>
</div>

<div id="flex_direction_row_reverse" style="height: 100px; width: 100px; flex-direction: row-reverse;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_margin_left"
  style="height: 100px; width: 100px; flex-direction: row-reverse; margin-left: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<!-- gentest.rb will swap margin-start to margin-left. This is needed to use YGEdgeStart instead of YGEdgeLeft in the generated tests -->
<div id="flex_direction_row_reverse_margin_start"
  style="height: 100px; width: 100px; flex-direction: row-reverse; margin-start: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_margin_right"
  style="height: 100px; width: 100px; flex-direction: row-reverse; margin-right: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_margin_end"
  style="height: 100px; width: 100px; flex-direction: row-reverse; margin-end: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse_margin_top"
  style="height: 100px; width: 100px; flex-direction: column-reverse; margin-top: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse_margin_bottom"
  style="height: 100px; width: 100px; flex-direction: column-reverse; margin-bottom: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_padding_left"
  style="height: 100px; width: 100px; flex-direction: row-reverse; padding-left: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_padding_start"
  style="height: 100px; width: 100px; flex-direction: row-reverse; padding-start: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_padding_right"
  style="height: 100px; width: 100px; flex-direction: row-reverse; padding-right: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_padding_end"
  style="height: 100px; width: 100px; flex-direction: row-reverse; padding-end: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse_padding_top"
  style="height: 100px; width: 100px; flex-direction: column-reverse; padding-top: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse_padding_bottom"
  style="height: 100px; width: 100px; flex-direction: column-reverse; padding-bottom: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_border_left"
  style="height: 100px; width: 100px; flex-direction: row-reverse; border-left-width: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_border_start"
  style="height: 100px; width: 100px; flex-direction: row-reverse; border-start-width: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_border_right"
  style="height: 100px; width: 100px; flex-direction: row-reverse; border-right-width: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_border_end"
  style="height: 100px; width: 100px; flex-direction: row-reverse; border-end-width: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse_border_top"
  style="height: 100px; width: 100px; flex-direction: column-reverse; border-top-width: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_column_reverse_border_bottom"
  style="height: 100px; width: 100px; flex-direction: column-reverse; border-bottom-width: 100px;">
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
  <div style="width: 10px;"></div>
</div>

<div id="flex_direction_row_reverse_pos_left" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; left: 100px;">
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_pos_start" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; start: 100px;">
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_pos_right" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; right: 100px;">
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_pos_end" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; end: 100px;">
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_column_reverse_pos_top" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; top: 100px;">
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_column_reverse_pos_bottom" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; bottom: 100px;">
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_pos_left" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; left: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_pos_right" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; right: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_col_reverse_inner_pos_top" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; top: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_col_reverse_inner_pos_bottom" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; bottom: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_pos_start" data-disabled="true" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; start: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_pos_end" data-disabled="true" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; end: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_margin_left" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; margin-left: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_margin_right" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; margin-right: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_col_reverse_inner_margin_top" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; margin-top: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_col_reverse_inner_margin_bottom" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; margin-bottom: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_marign_start" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; margin-start: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_margin_end" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; margin-end: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_border_left" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; border-left: 10px solid black"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_border_right" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; border-right: 10px solid black"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_col_reverse_inner_border_top" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; border-top: 10px solid black"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_col_reverse_inner_border_bottom" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; border-bottom: 10px solid black"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_border_start" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; border-start: 10px solid black"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_border_end" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; border-end: 10px solid black"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_padding_left" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; padding-left: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_padding_right" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; padding-right: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_col_reverse_inner_padding_top" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; padding-top: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_col_reverse_inner_padding_bottom" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; padding-bottom: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_padding_start" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; padding-start: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>

<div id="flex_direction_row_reverse_inner_padding_end" style="height: 100px; width: 100px;">
  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
    <div style="width: 10px; height: 10px; position: absolute; padding-end: 10px"></div>
    <div style="width: 10px;"></div>
    <div style="width: 10px;"></div>
  </div>
</div>
